<template>
	<div class="ground-container">
		<scroll-view  :scroll-x="true">
			<view class="top">
				<view v-for="(item,index) in hotListCate" ref="scroll" :key="item.id" @click="click(index)" :class="index==currentIndex?'active':''"><p>{{item.playlistTag.name}}</p></view>
			</view>
		</scroll-view>
		<swiper :style="{'height': 3080 + 'px'}" :autoplay="false" :duration="500" :current="currentIndex" @change="indexChange">
			<swiper-item v-for="(item, index) in hotListCate" :key="item.id">
				<!-- <view class="swiper-item" >{{item.playlistTag.name}}</view> -->
				<hot-list v-if="index == 0"></hot-list>
				<play-list v-if="index==1"   :tagname="hotListCate[index]"></play-list>
				<play-list v-if="index==2"  :tagname="hotListCate[index]" ></play-list>
				<play-list v-if="index==3"  :tagname="hotListCate[index]" ></play-list>
				<play-list v-if="index==4"  :tagname="hotListCate[index]" ></play-list>
				<play-list v-if="index==5"  :tagname="hotListCate[index]" ></play-list>
				<play-list v-if="index==6"  :tagname="hotListCate[index]" ></play-list>
				<play-list v-if="index==7"  :tagname="hotListCate[index]" ></play-list>
				<play-list v-if="index==8"  :tagname="hotListCate[index]" ></play-list>
				<play-list v-if="index==9"  :tagname="hotListCate[index]" ></play-list>
				<play-list v-if="index==10" :tagname="hotListCate[index]" ></play-list>
			</swiper-item>
		</swiper>
		
		<view class="music-play" @click="showPlayView()">
			<tab-bar :iac="iac"></tab-bar>
		</view>
		
		<wyb-popup ref="playView" type="bottom"  width="500" height="100%" radius="0" :showPlay="true" class="playView" style="position: ralative; z-index :999">
			  <play-view @hidePlayView="hidePlayView" :iac="iac" ></play-view>
		</wyb-popup>
	</div>
</template>
 
<script>
	import app from '../../App.vue'
	import hotList from '../../components/playList/hotList.vue'
	import playList from '../../components/playList/playList.vue'
	export default {
		data() {
			return {
				hotListCate: null,
				currentIndex: 0,
				tags: {
					playlistTag:{
						name: "推荐"
					},
					id: 5000
				},
				swiperHeight: '',
				iac: app.globalData.iac,
				playListData: [null],
				tag: '',
				inter: null,
				inter2: null
			}
		},
		onLoad() {
			this.getHotList()
		},
		onUnload() {
			// clearInterval(this.inter)
			// clearInterval(this.inter2)
		},
		onReady() {
			// this.inter = setInterval(()=>{
			// 	this.swiperHeight = document.querySelector('.playListComponet').getClientRects()[0].height
			// }, 100)
			// setTimeout(()=>{
			// 	clearInterval(this.inter)
			// },20000)
		},
		components:{
			hotList,
			playList
		},
		methods: {
			getHotList(){
				uni.request({
					url: 'http://119.3.174.206:3000/playlist/hot',
					success: (res) => {
						// console.log(res.data)
						this.hotListCate = [this.tags,...res.data.tags]
					}
				})
			},
			indexChange(e){		
				this.currentIndex = e.detail.current
				// this.inter2 = setInterval(()=>{this.swiperHeight = document.querySelectorAll('.playListComponet')[this.currentIndex].offsetHeight},100)
				// setTimeout(()=>{clearInterval(this.inter2)},3000)
			},
			click(index){
				this.currentIndex = index
			},
			showPlayView(){
				this.$refs.playView.show()
			},
			hidePlayView(){
				this.$refs.playView.hide()
			}
			// getPlayListData(){
			// 	for(let i = 1; i < this.hotListCate.length; i++){
			// 		uni.request({
			// 			url: 'http://119.3.174.206:3000/top/playlist?cat='+this.hotListCate[i].playlistTag.name,
			// 			success: (res) => {
			// 				// console.log(res)
			// 				// this.playListData[i] = res.data
			// 			}
			// 		})
			// 	}
			// 	console.log(this.playListData)
			// }
			
		}
	}
</script>

<style lang="less" scoped>
	.ground-container {
		font-size: 28rpx;
		height: 100%;
		scroll-view {
			position: fixed;
			z-index: 7;
			background-color: #fff;
		}
		.top {
			margin: 10rpx 0;
			white-space: nowrap;
			view {
				display: inline-block;
				padding: 0 30rpx;
				height: 70rpx;
				// width: 70rpx;
				text-align: center;
				line-height: 70rpx;
			}
			.active {
				p {border-bottom: 2rpx solid red; color: red}
			}
		}
		swiper {
			min-height: 100%;
			// max-height: 290%;
			// height: auto;
			// background-color: pink;
			padding-top: 100rpx;
		}
		.music-play {
			position: fixed;
			bottom: 0;
			width: 100%;
			// height: 100px;
		}
		
	}
</style>
